Colors & Tokens.
Brand palette, semantic states, graphite + slate scales, surfaces, spacing, radius, and the 4px / 12-column grid.
Colors & Tokens
Base unit · 4px
Every spacing, sizing, and offset value snaps to a multiple of 4px. The spacing scale above (sm 4 · md 8 · lg 12 · xl 16 · xxl 20 · 3xl 24) is just the most-used steps on that grid. When something doesn't fit a token, pick the next 4px multiple — never invent a 5px, 7px, or 14px gap.
12-column grid
Page bodies are laid out on a 12-column grid with 24px gutters. Every layout choice — full-width hero, two-column form, sidebar + main — picks an integer span. The most-used patterns are 8+4 (content + meta), 9+3 (content + side rail), 6+6 (split), and 12 (full-bleed).
Gutter behavior
Inter-column gutters are fixed at 24px on desktop and tablet, 16px on mobile. Outer page padding scales with viewport width. Never set a gutter at any other value — if columns feel too close, change the span ratio, don't loosen the gutter.
Container widths
Page content sits inside a centered container that maxes out at the breakpoint below. Above the largest breakpoint, the container stops growing and gutters absorb the extra space. App shells (left nav + main) take the full viewport; documentation pages cap at lg (1280).